<nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
  <a class="navbar-brand"
     [routerLink]="['/events']">ngEvents</a>
  <button class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse"
       id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">

      <!-- load data from component, not flexible to add additional style for a specific item
        <li class="nav-item"
          *ngFor="let item of menuItems">
        <a class="nav-link"
           [routerLink]="item.link"
           routerLinkActive="active"
           [routerLinkActiveOptions]="{exact: true}">
          {{item.caption}}
        </a>
      </li> -->

      <li class="nav-item">
        <a class="nav-link"
           [routerLink]="['/events']"
           routerLinkActive="active"
           [routerLinkActiveOptions]="{exact: true}">All Events
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link"
           routerLink="/events/create"
           routerLinkActive="active">Create Event</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle"
           href="#"
           id="navbarDropdown"
           role="button"
           data-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
          Events
        </a>
        <div class="dropdown-menu"
             aria-labelledby="navbarDropdown">
          <a class="dropdown-item"
             href="#">Action</a>
          <a class="dropdown-item"
             href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item"
             href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled"
           href="#">Disabled</a>
      </li>
    </ul>
    <form (ngSubmit)="searchSessions(searchTerm)"
          class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2"
             type="search"
             [(ngModel)]="searchTerm"
             name="searchTerm"
             placeholder="Search Sessions"
             aria-label="Search">
      <button appModalId="searchResult"
              class="btn btn-outline-warning my-2 my-sm-0"
              type="submit">Search</button>
    </form>
    <ul class="mr-4 navbar-nav">
      <ng-container *ngIf="authService.isAuthenticated">
        <li class="nav-item">
          <a class="nav-link"
             [routerLink]="['user/profile']"
             routerLinkActive="active">Welcome {{authService.currentUser.username}}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"
             (click)="logout()">Logout</a>
        </li>
      </ng-container>
      <ng-container *ngIf="!authService.isAuthenticated">
        <li class="nav-item">
          <a class="nav-link"
             routerLink="login"
             routerLinkActive="active">Login</a>
        </li>
      </ng-container>
    </ul>
  </div>
</nav>

<!-- content projection for modal window when clicking search -->
<app-modal-bootstrap closeOnBodyClick="true"
           title="Matching Sessions"
           elementId="searchResult">
  <div class="list-group">
    <a class="list-group-item list-group-item-action list-group-item-info"
       *ngFor="let session of foundSessions"
       [routerLink]="['/events', session.eventId]">{{session.name}}</a>
  </div>
</app-modal-bootstrap>
